background-clip 是什么
background-clip 是 css3 出的一个属性，表示背景在盒子模型中显示的范围，一共有三个值：
- border-box: 指背景显示的范围至边框包括边框 border
- padding-box: 指背景显示的范围至内边距包括内边距 padding
- content-box: 指背景显示的范围至内容区包括内容区 content
兼容性参考 MDN ： https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
background-clip 应用
1.固定元素的间隔要求剩下的元素自适应宽度,并贴边父元素应该怎么做呢？
之前和小伙伴讨论实现完的时候只记得 background-clip 、box-sizing 以及 父元素 overflow 是关键，但后来怎么实现忘记了。实际上还有一个是关键 magin 可以取负值!
废话不多说，上代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.father {
margin-left: -10px;
height: 200px;
border: 1px solid #ddd;
overflow: hidden;
}
.child {
box-sizing: border-box;
padding-left: 10px;
float: left;
width: 33.33%;
height: 100%;
background: #4597d7;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
看这段代码之前，我们还要了解一下 box-sizing。
我们都知道盒子模型有两种表现的方式，一种是标准模式，另一种是怪异模式， 根据浏览器的不同显示不一样，那与我们现在要说的 box-sizing 有什么关系呢？实际上我们也可以通过设置 box-sizing 的值让盒子以标准模式还是怪异模式来表现，box-sizing 默认值为 content-box ，意思就是默认是 标准模式，width 只包括 content 区，但设置为 border-box 的时候，就默认为 IE 的怪异模式，width 就会包括 content、padding 以及 border。
我们在这里设置 box-sizing 为 border-box 是为了将 div 三等分，然后利用 backgroud-clip：content-box，让背景只处于内容区，然后再利用 padding 处理元素与元素间的间隔，最后再利用父元素的 overflow 以及 margin-left 为负值的属性，将三个元素包含在了同一行。到这里就完成了。
该方法还是有很多限制，不好在于元素与元素间的间隔语义化上来说应使用 margin ，这里已经用 padding 代替，会导致下面有很多限制。如果有更好的方法，欢迎交流。
2.环球
当设计师给你这样的一个设计图，而且要求，边上的圆圈还要围绕着转，那你如果用一个 应该怎么做？
说一下我实现的思路，怎么写一个环球出来？
background-clip 既然能够使盒子选择自身背景显示的范围，那么我们来看设计图，先忽略边上的小圆，最外圆我们把它当成盒子的 border,那么里面实心的圆可以当成是盒子的 content ，那中间留白是 padding 那，那么我们可以选用 background-clip: content-box; 让蓝色的背景只停留在 content 区，那么 padding 区就是默认的白色了，然后 border 再选用蓝色, border-radius 设置为 50% ，这不就出来了么。
然后岛边上的圆了，边上的圆怎么处理？
边上的圆怎么看都像一个元素啊？可要用一个元素实现，我们要怎么做呢？既然不能是一个真实的元素，那我们可以借助 css 伪元素的概念写出来。再将它移到合适的位置。另外，最外的小圆要围绕大圆转，这块我们可以借助 CSS3 的动画来实现，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 <style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.cicle {
position: relative;
width: 100px;
height: 100px;
background-color: #1c9dd1;
background-clip: content-box;
padding: 20px;
border: 2px solid #1c9dd1;
border-radius: 50%;
}
.cicle:after {
content: "";
position: absolute;
top: 60px;
left: 60px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #1c9dd1;
animation: cicleRotate 6s linear infinite;
}
@keyframes cicleRotate {
from {
transform: rotate(-360deg) translate(71px) rotate(360deg);
}
to {
transform: rotate(0deg) translate(71px) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="cicle"></div>
</body>